<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lwx
  Date: 2018/3/27
  Time: 15:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/css/singer.css"/>
    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/singer.js"></script>
    <title>Title</title>
</head>
<body>
    <jsp:include page="header.jsp"></jsp:include>
    <c:set var="musicBegin" value="1" scope="session"></c:set>
    <c:set var="musicEnd" value="5" scope="session"></c:set>
    <div id="artistContent">
        <div class="artistTop">
            <input id="sId" type="hidden" value="${s.sId}">
            <img src="${s.sImg}" class="singerPic">
            <div class="tab">
                <h1>${s.sName}</h1>
                <ul>
                    <li class="disport">
                        <span>娱乐</span>
                    </li>
                    <li class="song">
                        <span>歌曲</span>
                    </li>
                    <li class="album">
                        <span>专辑</span>
                    </li>
                    <li class="mv">
                        <span>MV</span>
                    </li>
                    <li class="songList">
                        <span>图片</span>
                    </li>
                </ul>
            </div>
            <!-- 歌手左内容 -->
            <div id="conBox">
                <!-- 歌手娱乐tab开始 -->
                <div id="disport" class="con">
                    <div id="artistInfo">
                        <div class="title">
                            <i></i>
                            <h2>基本信息</h2>
                        </div>
                        <table>
                            <tr class="odd">
                                <td>姓名： ${s.sName}</td>
                                <td>性别： ${s.sex}</td>
                            </tr>
                            <tr>
                                <td>别名： ${s.alias}</td>
                                <td>国籍： ${s.country}</td>
                            </tr>
                            <tr class="odd">
                                <c:set var="language" value="${s.language}"></c:set>
                                <td>语言： ${fn:substring(language,0 ,fn:length(language) - 1 )}</td>
                                <td>出生地： ${s.bornPlace}</td>
                            </tr>
                            <tr>
                                <td>生日： ${s.birthday}</td>
                                <td>星座： ${s.constellation}</td>
                            </tr>
                            <tr class="odd">
                                <td>身高： ${s.height}</td>
                                <td>体重： ${s.weight}</td>
                            </tr>
                        </table>
                    </div>
                    <div id="introduce">
                        <div class="title">
                            <i></i>
                            <h2>个人简介</h2>
                        </div>
                        <p>
                            ${s.introduce}
                        </p>

                    </div>
                </div>
                <%--歌手单曲--%>
                <div id="song" class="con">

                </div>
                <%--右边相似歌手--%>
                <div id="artistRight">
                    <h2>相似歌手</h2>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="../image/3504220204.jpg" alt="">
                            </a>
                            <br>
                            <a href="javascript:void(0);">
                                <span>王力宏</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="../image/1440449236.jpg" alt="">
                            </a>
                            <br>
                            <a href="javascript:void(0);">
                                <span>光良</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="../image/2937285581.jpg" alt="">
                            </a>
                            <br>
                            <a href="javascript:void(0);">
                                <span>蔡健雅</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="../image/2102134023.jpg" alt="">
                            </a>
                            <br>
                            <a href="javascript:void(0);">
                                <span>张学友</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="../image/1438959906.jpg" alt="">
                            </a>
                            <br>
                            <a href="javascript:void(0);">
                                <span>苏打绿</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="../image/4050441143.jpg" alt="">
                            </a>
                            <br>
                            <a href="javascript:void(0);">
                                <span>S.H.E</span>
                            </a>
                        </li>
                    </ul>
                    <div class="downList">
                        <h2>贪玩音乐多端下载</h2>
                        <dl>
                            <dd class="iphone">
                                <a href="javascript:void(0);">iPone</a>
                            </dd>
                            <dd class="pc">
                                <a href="javascript:void(0);">PC</a>
                            </dd>
                            <dd class="android">
                                <a href="javascript:void(0);">Android</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%--mv部分--%>
    <div id="box">
        <a href="javascript:void(0);" class="closeBtn"></a>
        <div id="videoBox">
            <video id="video" controls="controls" autoplay src=""></video>
        </div>
    </div>
    <jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
